<template>
  <view class="x-page-order">
    <x-fixed ref="x-fixed" placeholder="true" fixed>
      <x-tabs flex="true" :active="current" :list="tabs" underline @change="onChangeTab" />
    </x-fixed>

    <view v-if="list && list.length" class="order-list">
      <view v-for="(item, index) in list" :key="item.id" class="item" @click="handleOrderDetail(item)">
        <view v-if="item.postSaleStatus === 0">
          <view class="header flex">
            <view class="flex flex1 align-center">
              <view class="store-img">
                <x-image v-if="isSaas" :src="storeLogo"/>
                <x-image v-else :src="item.storeLogo"/>
              </view>
              <text class="store-name">{{ item.storeName || appName }}</text>
            </view>
            <view class="status">{{ orderStatusText(item) }}</view>
          </view>
          <view class="goods">
            <view style="padding-bottom: 12px;">
              <x-order-product :detail="item"/>
            </view>
            <view class="total">
              <text class="count">共{{ item.productCount }}件商品</text>
              <text class="price">总价: ¥{{ formatZero(item.totalPay) }}</text>
              <text class="pay">
                {{[0, 4].includes(item.orderStatus) ? '需付款：' : '实付款：'}}
                <text class="blod">
                  <text class="font-24" style="margin-right: 2px;">¥</text>
                  {{ formatZero(item.totalPay) }}
                </text>
              </text>
            </view>
            <view class="bottom" v-if="item.orderStatus !== 0 && item.orderStatus !== 4 && item.orderType === 2 && item.groupStatus !== 2">
              <!--邀请好友参团-->
              <view class="invite">
                <view class="flex flex1 lf">
                  还差<text class="red">1</text>人拼团成功，剩余
                  <view class="red">
                    <x-countdown v-if="item.groupEndTime" :model.sync="item.countdownData" :end="item.groupEndTime" auto @finish="onTimeFinish">
                      <template v-if="item.countdownData">
                        <view>
                          <text >{{ item.countdownData.hour }}时</text>
                          <text >{{ item.countdownData.minute }}分</text>
                          <text >{{ item.countdownData.second }}秒</text>
                        </view>
                      </template>
                    </x-countdown>
                  </view>
                </view>
                <view class="share">
                  <x-button
                    :dataObj="item"
                    plain
                    border
                    openType="share"
                    size="small"
                    priority="secondary"
                    styles="padding: 0;font-size: 12px;"
                  >邀请好友参团</x-button>
                </view>
              </view>
            </view>
            <view class="bottom" v-else>
              <x-button type="default" plain @click="handleService(item)">联系商家</x-button>
              <view class="btn apprise" v-if="item.payStatus === 1">
                <x-button plain @click="handleComment(item,index)">评价</x-button>
              </view>
              <view class="btn" v-if="item.canComplaint">
                <x-button type="default" plain @click="onFeedBack(item)">交易投诉</x-button>
              </view>
              <view v-if="isOpenApp && item.orderStatus === 1" class="btn">
                <x-button plain type="default" @click="handleUrgeDelivery(item)">催发货</x-button>
              </view>
              <!-- orderType		订单类型：1-普通订单；2-拼团订单 -->
              <view class="btn" v-if="item.orderStatus === 0">
                <x-button type="default" plain @click="handleChangeAddress(item)">修改地址</x-button>
              </view>
              <view class="btn" v-if="item.orderStatus === 0">
                <x-button plain @click="handlePay(item)">立即支付</x-button>
              </view>
              <view class="btn" v-if="item.expressNo">
                <x-button type="default" plain @click="handleLogistics(item)">查看物流</x-button>
              </view>
              <view class="btn" v-if="item.orderStatus === 2 && item.closeStatus !== 6">
                <x-button plain @click="handleReceived(item, index)">确认收货</x-button>
              </view>
<!--              <view class="btn apprise" v-if="item.orderStatus === 3 && item.commentStatus === 0">-->
<!--                <x-button plain @click="handleComment(item,index)">评价</x-button>-->
<!--              </view>-->
            </view>
          </view>
        </view>
        <!--退款售后，发货后退货-->
        <view v-if="item.postSaleStatus !== 0">
          <view class="header flex">
            <view v-if="isSaas" class="flex1" />
            <view v-else class="flex flex1 align-center">
              <view class="store-img">
                <x-image :src="item.storeLogo"/>
              </view>
              <text class="store-name">{{ item.storeName }}</text>
            </view>
            <view class="status">{{ orderStatusText(item) }}</view>
          </view>
          <view class="goods">
            <!-- 商品信息  -->
            <view style="padding-bottom: 6px;">
              <x-order-product :detail="item"/>
            </view>
            <view class="total-refund">
              <view class="_status font-28">
                <text v-if="[8, 11, 12].includes(item.postSaleStatus)">退款已关闭</text>
                <text v-else-if="[7, 9, 10].includes(item.postSaleStatus)" class="message-color">退款成功¥{{ formatZero(item.totalPay) }}</text>
                <template v-else>
                  <view class="message-color margin-rt20">{{ bottomText(item) }}</view>
                  <view class="flex" v-if="showCountDown(item)">
                    请在
                    <view class="message-color flex">
                      <x-countdown :model.sync="item.countdownData" :end="item.invalidTime" auto @finish="onTimeFinish">
                        <template v-if="item.countdownData">
                          <view>
                            <text >{{ item.countdownData.day }}天</text>
                            <text >{{ item.countdownData.hour }}时</text>
                            <text >{{ item.countdownData.minute }}分</text>
                            <text >{{ item.countdownData.second }}秒</text>
                          </view>
                        </template>
                      </x-countdown>
                    </view>
                    内处理
                  </view>
                </template>
              </view>
            </view>
            <view class="bottom">
              <x-button type="default" plain @click="handleService(item)">联系商家</x-button>
              <view class="btn apprise" v-if="item.payStatus === 1">
                <x-button plain @click="handleComment(item,index)">评价</x-button>
              </view>
              <view class="btn" v-if="item.canComplaint">
                <x-button type="default" plain @click="onFeedBack(item)">交易投诉</x-button>
              </view>
              <view class="btn" v-if="item.expressNo">
                <x-button type="default" plain @click="handleLogistics(item)">查看物流</x-button>
              </view>
              <view class="btn" v-if="item.orderStatus === 2 && item.closeStatus !== 6 && item.fundType !== 1">
                <x-button plain @click="handleReceived(item, index)">确认收货</x-button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!--loading-->
    <x-loading v-if="pagination.loading" />

    <!--接口错误的情况下，展示火爆界面-->
    <view v-if="isTimeOut" class="time-out">
      <x-time-out msg="订单太火爆了，请点击刷新重试" @retry="getOrderList" />
    </view>

    <!--empty-->
    <template v-if="list && list.length === 0">
      <view class="m-empty">
        <view class="_img">
          <x-image src="/assets/images/no-order.png" mode="widthFix"/>
        </view>
        <view class="_text">未查询到订单信息</view>
      </view>

      <!--推荐商品-->
      <view class="no-order-goods-list">
        <x-goods-list ref="goodsList" :list="goodsList"/>
      </view>
    </template>

    <!--联系商家-->
    <p-drawer
      v-if="serviceVisible"
      :visible.sync="serviceVisible"
      :contact-way="contactWay"
      :corp-id="corpId"
      :detail="currentRow"
      :inset-bottom="insetBottom"
    />
    <!--评论弹框-->
    <p-comment
      v-if="commentVisible"
      :visible.sync="commentVisible"
      @confirm="handleConfirmComment"
    />
    <!--发货提醒-->
    <x-drawer :visible.sync="shipVisible" direction="btt" round cancel>
      <view class="x-ship-success">
        <view class="pic">
          <x-icon name="icon-061" color="#FF5000" size="100" />
        </view>
        <view class="dt">提醒发货成功</view>
        <view class="dd">已经提醒卖家发货，平台将主动帮您跟进订单发货</view>
        <view class="tools">
          <view v-if="isOpenApp" class="button">
            <view class="but">
              <x-button
                plain
                styles="border: none !important;color:#fff;"
                @click="handleJumpCustomer"
              >
                继续联系商家
              </x-button>
            </view>
          </view>
          <view class="button" @click="shipVisible = false">我已知晓</view>
        </view>
        <view class="safe-area-inset-bottom" />
      </view>
    </x-drawer>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
import config from '@/config';
import $sr from '@/utils/x-sr';
import XTools from '@/utils/x-tools';

import XFixed from '@/components/x-fixed';
import XTabs from '@/components/x-tabs';
import XGoodsList from '@/components/x-goods-list';
import XImage from '@/components/x-image';
import XLoading from '@/components/x-loading';
import XTimeOut from '@/components/x-time-out';
import XButton from '@/components/x-button';
import XCountdown from '@/components/x-countdown';
import XOrderProduct from '@/components/x-order-product';
import XDrawer from '@/components/x-drawer';
import XIcon from '@/components/x-icon';
import PDrawer from './p-drawer';
import PComment from './p-comment';
var plugin = requirePlugin('wxacommentplugin');
export default {
  name: 'XPageOrder',
  components: {
    XTabs,
    XFixed,
    XGoodsList,
    XImage,
    XLoading,
    XTimeOut,
    XButton,
    XCountdown,
    XOrderProduct,
    XDrawer,
    XIcon,
    PDrawer,
    PComment
  },
  props: {
    insetBottom: {
      type: Boolean,
      default: false
    },
    query: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // appId,
      appId: config.appId,
      // 第三方开发平台
      isOpenApp: config.isOpen,
      isSaas: config.project === 'saas',
      storeLogo: config.headImg,
      appName: config.appName,
      tabs: [
        { name: '全部', value: 0 },
        { name: '待付款', value: 1 },
        { name: '待成团', value: 5 },
        { name: '待发货', value: 2 },
        { name: '待收货', value: 3 },
        { name: '待评价', value: 6 }
      ],
      current: 0,
      list: null,
      // 分页相关
      pagination: {
        more: true,
        loading: false,
        pageNum: 1,
        pageSize: 10
      },
      goodsList: [],
      // 推荐商品分页数据
      paginationGoods: {
        more: true,
        loading: false,
        pageNum: 1,
        pageSize: 10
      },
      isTimeOut: false,
      addressInfo: null,
      serviceVisible: false,
      currentRow: null,
      contactWay: null,
      corpId: null,
      storeInfo: null,
      commentVisible: false,
      shipVisible: false
    };
  },
  computed: {
    ...mapGetters([
      'dictionary'
    ]),
    // 当前选中的tab
    currentTab() {
      return this.tabs[this.current];
    }
  },
  watch: {},
  created() {
    if (this.query?.status) {
      this.current = +this.query.status;
    }
    this.getOrderList();
    this.$store.dispatch('system/dictionary', 'APP_COMMENT_SOURCE');

    // 非saas端获取企业客服信息
    if (!this.isSaas) {
      this.$store.dispatch('user/getCustomerInfo').then(({ contactWay, corpId }) => {
        this.contactWay = contactWay;
        this.corpId = corpId;
      });
    }
  },
  methods: {
    orderStatusText(item) {
      switch (item.orderStatus) {
        case 0:
          return '待买家付款';
        case 1:
          return '待商家发货';
        case 2:
          return '商家已发货';
        case 3:
          return '交易成功';
        case 4:
          return '交易关闭';
      }
    },
    bottomText(item) {
      switch (item.postSaleStatus) {
        case 2 || 4 || 5:
          return '待商家退款';
        case 3:
          return '商家拒绝退款';
        case 6:
          return '商家拒绝收货，不同意退款';
        case 8 || 11 || 12:
          return '退款关闭';
        case 7 || 9 || 10:
          return '退款成功';
      }
    },
    showCountDown(item) {
      switch (item.postSaleStatus) {
        case 3:
          return true;
        case 6:
          return true;
        case 2 || 4 || 5:
          return true;
      }
    },
    // 价格格式化
    formatZero(value) {
      return XTools.formatZero(value);
    },
    // 切换
    onChangeTab(index) {
      this.current = index;
      this.list = null;
      this.pagination = {
        more: true,
        loading: false,
        pageNum: 1,
        pageSize: 10
      };
      this.getOrderList();
    },
    // 获取订单列表
    getOrderList() {
      this.isTimeOut = false;
      if (this.pagination.loading || !this.pagination.more) return false;
      this.pagination.loading = true;
      const params = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        status: this.currentTab.value
      };
      this.$http({
        login: true,
        url: '/order/app/order/list',
        data: params
      }).then(res => {
        const list = res.data ? res.data.map(item => {
          const time = item.invalidTime ? +new Date(item.invalidTime.replace(/\-/gi, '/')) - +new Date() : null;
          return {
            ...item,
            countdownData: null,
            formatTime: time ? this.$tools.formatTimeDiff(time) : null
          };
        }) : [];
        // console.log(list);
        if (this.pagination.pageNum === 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
        if (this.list.length === 0) {
          this.getGoodsList();
        }
        this.pagination.more = !!list.length; // 是否还有下一页
        this.pagination.loading = false;
        this.pagination.pageNum = this.pagination.pageNum += 1; // 请求成功后页码直接+1
        uni.stopPullDownRefresh(); // 完成停止加载
      }).catch(() => {
        if (this.pagination.pageNum === 1) {
          this.isTimeOut = true;
        }
        this.pagination.loading = false;
        uni.stopPullDownRefresh(); // 完成停止加载
      });
    },
    //  获取列表商品
    getGoodsList() {
      if (this.paginationGoods.loading || !this.paginationGoods.more) return false;
      this.paginationGoods.loading = true;
      const params = {
        pageNum: this.paginationGoods.pageNum,
        pageSize: this.paginationGoods.pageSize
      };
      this.$http({
        login: true,
        url: '/product/app/spu/list',
        data: params,
        report: true
      }).then(res => {
        const goodsList = res.data ? res.data.map(item => {
          return {
            ...item
          };
        }) : [];
        this.goodsList = goodsList;
        this.$refs.goodsList.handleList(goodsList);
        Object.assign(this.paginationGoods, {
          loading: false,
          more: !!res.data?.length,
          pageNum: this.paginationGoods.pageNum += 1
        });
        // 完成停止加载
        uni.stopPullDownRefresh();
      }).catch(() => {
        if (this.paginationGoods.pageNum === 1) {
          this.goodsList = [];
        }
        Object.assign(this.paginationGoods, {
          loading: false,
          more: false
        });
        // 完成停止加载
        uni.stopPullDownRefresh();
      });
    },
    // 前往订单详情
    handleOrderDetail(item) {
      this.serviceVisible = false;
      uni.navigateTo({
        url: `/packages/order/detail/index?orderId=${item.id}`
      });
    },
    // 下拉刷新
    handlePullDownRefresh() {
      this.list = null;
      this.pagination = {
        more: true,
        loading: false,
        pageNum: 1,
        pageSize: 10
      };
      this.getOrderList();
    },
    // 页面触底加载数据
    handleReachBottom() {
      this.getOrderList();
      if (!(this.list && this.list.length)) {
        this.getGoodsList();
      }
    },
    // 立即支付
    handlePay(item) {
      const params = {
        orderId: item.id
      };
      this.$http({
        url: '/order/order/repay',
        method: 'post',
        data: params
      }).then(res => {
        const wxParams = res.data;
        // 有数上报，支付
        this.srTrack('pay', item);
        uni.requestPayment({
          orderInfo: wxParams.orderInfo,
          timeStamp: wxParams.timeStamp,
          paySign: wxParams.paySign,
          nonceStr: wxParams.nonceStr,
          signType: wxParams.signType,
          package: wxParams.package,
          success: () => {
            this.srTrack('payed', item);
            // 刷新当前数据
            this.handlePullDownRefresh();
            // 支付成功埋点
            this.$XTrack('orderPaySuccess', {
              isRepay: true,
              orderId: params.orderId
            });
          },
          fail: (err) => {
            console.log('requestOrderPayment->', err);
            if (err.errMsg.includes('cancel')) {
              // 有数上报，取消支付
              this.srTrack('cancel_pay', item);
            }
          }
        });
      }).catch(err => {
        console.log(err);
      });
    },
    //  确认收货
    handleReceived(item, index) {
      const { payNo, deliveryUploadStatus, id } = item || {};
      console.log('确认收货');
      this.$XTrack('handleReceivedOrderInfo', {
        project: config.project,
        orderId: id,
        payNo,
        deliveryUploadStatus,
        isOpenBusinessView: !!wx.openBusinessView
      });
      uni.showModal({
        title: '确认收到货了吗',
        content: '为了保证你的售后权益，请收到商品确 认无误后再确认收货',
        success: (res) => {
          if (res.confirm) {
            this.$http({
              url: '/order/order/received',
              method: 'post',
              data: {
                orderId: id
              }
            }).then(() => {
              // console.log(res);
              //  如果状态栏是全部，就修改状态为已收货
              if (this.current === 0) {
                //  do something
                this.list[index].orderStatus = 3;
              }
              //  如果状态栏是待收货，就删掉这个数据
              if (this.current === 4) {
                //  do something
                this.list.splice(index, 1);
              }
            }).catch(err => {
              console.log(err);
            });
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    // 催发货
    handleUrgeDelivery(item) {
      this.shipVisible = true;
      this.$http({
        url: '/order/app/delivery/status',
        method: 'post',
        error: false,
        data: {
          orderId: item.id
        }
      });
    },
    async handleJumpCustomer(item) {
      await this.getStoreInfo(item);
      if (item.companyName === '杭州桃红网络有限公司') {
        const storeInfo = this.storeInfo || {};
        const shareCustomerData = this.shareCustomerData || {};
        this.$tools.$formatCustomerServiceChat(storeInfo, shareCustomerData);
      } else {
        this.handleOfficialCustomer();
      }
    },
    // 获取店铺信息
    async getStoreInfo(item) {
      const params = {
        storeId: item.storeId
      };
      this.$http({
        login: true,
        url: '/account/store/base/info',
        method: 'get',
        data: params
      }).then(res => {
        this.storeInfo = res.data || {};
        this.getCustomerInfo();
      }).catch(err => {
        console.log(err);
      });
    },
    getCustomerInfo() {
      if (!this.isSaas) {
        this.$store.dispatch('user/getCustomerInfo').then(({ contactWay, corpId }) => {
          this.contactWay = contactWay;
          this.corpId = corpId;
        });
      }
    },
    // 官方客服
    handleOfficialCustomer() {
      this.$openCustomerServiceChat(this.contactWay, {
        corpId: this.corpId
      });
    },
    // 修改地址
    handleChangeAddress(item) {
      uni.chooseAddress({
        success: res => {
          console.log(res);
          this.addressInfo = {
            userName: res.userName,
            userPhone: res.telNumber,
            userProvince: res.provinceName,
            userCity: res.cityName,
            userArea: res.countyName,
            userAddress: res.detailInfo,
            multiIndex: [res.provinceName, res.cityName, res.countyName],
            addressInfo: res.provinceName + '-' + res.cityName + '-' + res.countyName
          };
          uni.setStorage({
            key: 'user-address-info',
            data: this.addressInfo
          });

          const params = {
            id: item.id,
            userName: this.addressInfo.userName, // 收件人姓名
            userPhone: this.addressInfo.userPhone, // 收件人手机号
            userProvince: this.addressInfo.userProvince, // 省
            userCity: this.addressInfo.userCity, // 市
            userArea: this.addressInfo.userArea, // 区
            userAddress: this.addressInfo.userAddress // 详细地址
          };
          this.$http({
            url: '/order/order/address',
            method: 'post',
            report: false,
            data: params
          }).then(() => {
            uni.showToast({
              icon: 'none',
              title: '修改地址成功！'
            });
            this.handlePullDownRefresh();
          }).catch(err => {
            console.log(err);
          });
        }
      });
    },
    // 查看物流
    handleLogistics(item) {
      // console.log('查看物流', item);
      if (item.expressNo && item.expressStatus > 0) {
        if (item.waybillToken) {
          // 在此通过调用api来查询微信快递服务详情
          // 必须用预览才能测试这个功能，无法在工具端模拟
          // plugin.openWaybillTracking({
          //   waybillToken: item.waybillToken
          // });

          // 先前往订单详情，再打开物流
          uni.navigateTo({
            url: `/packages/order/detail/index?orderId=${item.id}&waybillToken=${item.waybillToken}`
          });
        } else {
          uni.navigateTo({
            url: `/packages/order/logistics/detail?orderId=${item.id}`
          });
        }
      } else {
        uni.navigateTo({
          url: `/packages/order/logistics/mock-detail?orderId=${item.id}`
        });
      }
    },
    // 交易投诉
    onFeedBack(item) {
      if (!item.complaintId) {
        uni.navigateTo({
          url: `/packages/serve/feedback/feedback-sub?complaintType=3&orderNo=${item.orderNo}`
        });
      } else {
        uni.navigateTo({
          url: `/packages/serve/feedback/detail?id=${item.complaintId}`
        });
      }
    },
    // 订单评价
    handleComment(item) {
      this.commentVisible = true;
      this.currentRow = item;
    },
    handleConfirmComment(val) {
      // 评价为满意及很满意跳转腾讯评价
      if (this.appId === this.currentRow.appId && val > 2) {
        plugin.openComment({
          wx_pay_id: this.currentRow.payNo, // 交易评价类账号选填
          success: (res) => {
            console.log('plugin.openComment success', res);
            this.$http({
              login: true,
              url: '/product/comment/commentinfo/callback',
              method: 'post',
              data: { commentId: res.commentId, appId: this.appId }
            }).then(res => {
              console.log('小程序评价成功回调');
            });
          },
          fail: (res) => {
            console.log('plugin.openComment fail', res);
            if (res.errCode === -4) {
              // 马到自带的评论
              uni.navigateTo({
                url: `/packages/serve/apprise/create-apprise?orderId=${this.currentRow.id}`
              });
            }
          }
        });
      } else {
        // 马到自带的评论
        uni.navigateTo({
          url: `/packages/serve/apprise/create-apprise?orderId=${this.currentRow.id}`
        });
      }
    },
    //  更新列表中的单个订单数据
    updateListItem(orderId) {
      const params = {
        orderId: orderId
      };
      this.$http({
        url: '/order/app/order/list',
        method: 'get',
        data: params
      }).then(res => {
        if (res.data && res.data[0]) {
          const findIndex = this.list.findIndex(item => item.id === orderId);
          if (findIndex >= 0) {
            this.$set(this.list, findIndex, res.data[0]);
          }
        }
      }).catch(err => {
        console.log(err);
      });
      // 更新后清除缓存
      this.$store.dispatch('order/getOrderId', null);
    },
    // 联系商家
    handleService(item) {
      this.currentRow = item;
      this.serviceVisible = true;
    },
    // 有数上报
    // give_order：用户提交订单；
    // pay：用户发起支付；
    // cancel_pay：用户关闭支付密码浮层；
    // payed：用户完成支付（影响有数实时订单统计）；
    // cancel_give_order：用户取消订单；
    // refund：用户发起退货退款
    srTrack(status, orderInfo) {
      $sr.trackCustomOrder(status, orderInfo);
    }
  }
};
</script>

<style lang="scss">
.m-empty{
  padding: 60px 0;
  ._img{ margin: 0 auto; width: 160px;}
  ._text{ margin-top: 20px; color: #646464; font-size: 32px; text-align: center;}
}
.no-order-goods-list{ padding: 24px;}

.order-list{
  .item{
    margin-top: 16px;
    display: flex;
    background: #FFFFFF;
    flex-direction: column;
    .header{
      padding: 28px;
      align-items: center;
      font-size: 28px;
      color: $uni-color-default;
      .store-img{
        width: 50px;
        height: 50px;
        border-radius: 2px;
        background: #FFE4E4;
        overflow: hidden;
      }
      .store-name{
        margin-left: 14px;
        font-size: 30px;
        font-weight: bold;
        //color: $uni-color-default;
      }
      .status{
        font-weight: bold;
        //font-size: 28px;
        //color: $uni-color-default;
      }
    }
    .goods{
      .info{
        display: flex;
        padding: 0 24px;
        .pic{
          width: 160px;
          height: 160px;
          border-radius: 6px;
          background: #FFE4E4;
          overflow: hidden;
        }
        .content{
          display: flex;
          flex-direction: column;
          flex: 1;
          margin-left: 16px;
          .goods-name{
            font-size: 28px;
            color: $uni-color-default;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .spec{
            margin-top: 8px;
            font-size: 24px;
            color:$uni-color-info;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }
        .refund-status{
          text-align: right;
          font-size: 24px;
          color: $uni-color-primary;
        }
        .rt-price-num{
          margin-left: 30px;
          text-align: right;
          .price{
            font-size: 28px;
            color: $uni-color-default;
          }
          .num{
            font-size: 24px;
            color:$uni-color-info;
          }
        }
      }
      .total{
        border-top: 1px solid #E5E5E5;
        padding: 24px 24px;
        text-align: right;
        font-size: 28px;
        color:$uni-color-info;
        .count{
          margin-right: 12px;
        }
        .price{
          margin-right: 12px;
        }
        .pay{
          color: $uni-color-default;
        }
      }
      .total-refund{
        border-top: 1px solid #E5E5E5;
        padding: 16px 24px;
        text-align: left;
        font-size: 28px;
        color:$uni-color-secondary;
        //display: flex;
        ._status{
          display: flex;
        }
      }
      .bottom{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 24px 28px;
        flex-wrap: wrap;
        .btn{
          //width: 172px;
          margin-left: 18px;
        }
        .btn:first-child{
          margin-left: 0;
        }
        .apprise{
          //width: 144px;
        }
        .invite{
          background: $uni-bg-color-message;
          padding: 12px 16px;
          display: flex;
          align-items: center;
          flex: 1;
          .lf{ color: $uni-color-default;font-size: 28px;}
          .share{ width: 180px;}
        }
      }
    }
  }
}
// 催发货成功提示
.x-ship-success{
  text-align: center;
  .dt{ font-size: 34px; color: #333333; padding-top: 50px;}
  .dd{ font-size: 30px; color: #666666; padding-top: 32px;}
  .tools{
    padding: 60px 25px 25px; display: flex;
    .button{
      height: 70px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; background: linear-gradient(90deg, #FEC300 0%, #FE9402 100%); flex: 1; text-align: center;
      .but{ flex: 1;}
      &:first-child{ border-radius: 40px 0 0 40px;}
      &:last-child{ background: linear-gradient(90deg, #FE7001 0%, #FF8605 100%); border-radius: 0 40px 40px 0;}
    }
  }
}

button {
  padding: 0 10px!important;
}
</style>
